<template>
    <view>
        <view>
            <navbar title="开始考试"></navbar>
        </view>
        <view class="body">
            <view>
                <view class="title">
                    <text>{{exam.name==null?"":exam.name}}</text>
                </view>
            </view>
            <view class="item">
                <view class="item-label">
                    描述
                </view>
                <view class="item-content">
                    <text>{{exam.explain==null?"":exam.explain}}</text>
                </view>
            </view>
            <view class="item">
                <view class="item-label">
                    开始时间
                </view>
                <view class="item-content">
                    <u-tag type="success" size='large'
                        :text='exam.beginTime==null?"":new Date(exam.beginTime).toLocaleString()'></u-tag>
                </view>
            </view>
            <view class="item">
                <view class="item-label">
                    结束时间
                </view>
                <view class="item-content">
                    <u-tag type="error" size='large'
                        :text='exam.endTime==null?"":new Date(exam.endTime).toLocaleString()'></u-tag>
                </view>
            </view>
            <view class="item">
                <view class="item-label">
                    发布时间
                </view>
                <view class="item-content">
                    <text>{{exam.createTime==null?"":new Date(exam.createTime).toLocaleString()}}</text>
                </view>
            </view>
            <view class="item">
                <u-button type="success" @click="toExam">开始考试</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        message,
        request,
        back
    } from '../../api'
    export default {
        data() {
            return {
                back: back,
                exam: {
                    name: "考试",
                    explain: "一场小考试",
                    beginTime: "开始时间",
                    endTime: "结束时间",
                    createTime: "发布时间",
                    testPaperId: "",
                    testPaperName: "试卷名",
                }
            }
        },
        methods: {
            toExam() {
                uni.navigateTo({
                    url: "/pages/exam/exam?id=" + this.$route.query.id
                });
            }
        },
        async mounted() {
            if (this.$route.query.error) {
                message.error(this.$route.query.error);
            }
            const res = await request.get("/exam/detail", {
                id: this.$route.query.id
            });
            if (res.code >= 0) {
                this.exam = res.data
            }
        }
    }
</script>

<style>
    .body {
        height: calc(100vh - 96px);
        overflow: auto;
        padding: 1rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        background-color: #eee;
    }

    .item {
        padding: 0.5rem 0;
        font-size: 1rem;
        display: flex;
        background-color: antiquewhite;
    }

    .item-label {
        font-weight: 550;
        flex: 1;
        padding: 0.2rem;
        border: 0.05rem solid #eee;
    }

    .item-content {
        flex: 2;
    }

    .title {
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        justify-content: center;
    }

    .sub-title {
        font-size: 1rem;
    }
</style>